<template>
  <div class="app-container">
    <Row>
      <Col :sm="24" :md="24" :lg="24">
        <div class="con">
          <Button type="success" style="margin-left: 10px" @click="in_storage = true">打开看板</Button>
        </div>

        <Card title="计划配置" style="width: 700px">
          <template #extra>
            <Button type="success" style="margin-left: 10px" @click="submit">保存配置</Button>
          </template>
          <div style="font-weight: 700">
            <span style="margin-left: 100px">型号</span>
            <span style="margin-left: 100px">计划数</span>
            <span style="margin-left: 80px">穴数</span>
            <span style="margin-left: 80px">标准节拍</span>
          </div>
          <Form :model="form">
            <FormItem label="喷涂1">
              <Input v-model="form.Xh1" size="small" style="width: 120px" />
              <Input v-model="form.P1" size="small" style="width: 120px" />
              <Input v-model="form.Xs1" size="small" style="width: 120px" />
              <Input v-model="form.bzjp1" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P1')">换线</Button>
            </FormItem>
            <FormItem label="喷涂2">
              <Input v-model="form.Xh2" size="small" style="width: 120px" />
              <Input v-model="form.P2" size="small" style="width: 120px" />
              <Input v-model="form.Xs2" size="small" style="width: 120px" />
              <Input v-model="form.bzjp2" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P2')">换线</Button>
            </FormItem>
            <FormItem label="喷涂3">
              <Input v-model="form.Xh3" size="small" style="width: 120px" />
              <Input v-model="form.P3" size="small" style="width: 120px" />
              <Input v-model="form.Xs3" size="small" style="width: 120px" />
              <Input v-model="form.bzjp3" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P3')">换线</Button>
            </FormItem>
            <FormItem label="喷涂4">
              <Input v-model="form.Xh4" size="small" style="width: 120px" />
              <Input v-model="form.P4" size="small" style="width: 120px" />
              <Input v-model="form.Xs4" size="small" style="width: 120px" />
              <Input v-model="form.bzjp4" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P4')">换线</Button>
            </FormItem>
            <FormItem label="喷涂5">
              <Input v-model="form.Xh5" size="small" style="width: 120px" />
              <Input v-model="form.P5" size="small" style="width: 120px" />
              <Input v-model="form.Xs5" size="small" style="width: 120px" />
              <Input v-model="form.bzjp5" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P5')">换线</Button>
            </FormItem>
            <FormItem label="打胶1">
              <Input v-model="form.Xh6" size="small" style="width: 120px" />
              <Input v-model="form.P6" size="small" style="width: 120px" />
              <Input v-model="form.Xs6" size="small" style="width: 120px" />
              <Input v-model="form.bzjp6" size="small" style="width: 120px" />
              <Button type="success" style="margin-left: 10px" @click="clear('P6')">换线</Button>
            </FormItem>
          </Form>
        </Card>
      </Col>
    </Row>
    <Modal v-model="in_storage" fullscreen :mask-closable="false" footer-hide>
      <div style="text-align: center" class="head">
        <h1 style="color: #35f5c9; font-weight: bold; font-size: 3rem; letter-spacing: 10px">衡德塑料加工工业互联网智造云平台</h1>
        <h1 style="color: crimson; font-weight: bold; font-size: 2rem; letter-spacing: 10px">喷涂车间产能看板</h1>
        <div class="time">
          {{ date }}
        </div>
      </div>
      <div class="content">
        <table>
          <tr>
            <th style="width: 8rem">线别</th>
            <th style="width: 18rem">型号</th>
            <th style="width: 8rem">穴数</th>
            <th style="width: 18rem">计划数</th>
            <th style="width: 15rem">标准节拍</th>
            <th style="width: 18rem">生产数</th>
            <th style="width: 18rem">实际节拍</th>
            <th style="width: 8rem">&nbsp;</th>
            <th style="width: 10rem">状态</th>
          </tr>
          <tr v-for="(o, i) in data" :key="i">
            <td>{{ col[i] }}</td>
            <td>
              <div class="barbox">
                <span class="count">{{ o[4] }}</span>
              </div>
            </td>
            <td>
              <div class="barbox">
                <span class="count">{{ o[5] }}</span>
              </div>
            </td>
            <td>
              <div class="barbox">
                <span class="count">{{ o[0] }}</span>
              </div>
            </td>
            <td>
              <div class="barbox">
                <span class="count">{{ o[6] }}</span>
              </div>
            </td>
            <td>
              <div class="barbox">
                <span class="count">{{ o[1] * o[5] }}</span>
              </div>
            </td>
            <td>
              <div class="barbox">
                <span class="count">{{ parseFloat(o[2]).toFixed(1) }}</span>
              </div>
            </td>
            <td style="padding-left: 0px">S</td>
            <td>
              <div class="barbox">
                <span :style="'color:' + color[o[3]]">{{ sta[o[3]] }}</span>
              </div>
            </td>
          </tr>
        </table>
      </div>
    </Modal>
  </div>
</template>

<script>
import BoardService from '@/api/board/board'
import PythonService from '@/api/python/python'
export default {
  name: 'Plating',
  data() {
    return {
      in_storage: true,
      date: this.$moment().format(),
      form: {},
      col: {
        P1: '喷涂1',
        P2: '喷涂2',
        P3: '喷涂3',
        P4: '喷涂4',
        P5: '喷涂5',
        P6: '打胶1',
      },
      col2: new Map([
        ['P喷涂-1', 'P1'],
        ['P喷涂-2', 'P2'],
        ['P喷涂-3', 'P3'],
        ['P喷涂-4', 'P4'],
        ['P喷涂-5', 'P5'],
        ['P打胶-1', 'P6'],
      ]),
      data: {
        P1: [0, 0, 0, 1, '28001', 1, 1],
        P2: [0, 0, 0, 1, '28002', 1, 1],
        P3: [0, 0, 0, 1, '28003', 1, 1],
        P4: [0, 0, 0, 1, '28004', 1, 1],
        P5: [0, 0, 0, 1, '28005', 1, 1],
        P6: [0, 0, 0, 1, '28006', 1, 1],
      },
      color: ['#00ff00', 'red', 'white'],
      sta: ['生产', '异常', '停机'],
    }
  },
  created() {},
  methods: {
    parseFloat(a) {
      return parseFloat(a)
    },
    getInfo() {
      //查询物料信息
      return Promise.all([PythonService.getPlatingData(), BoardService.getSprayingView()])
        .then((res) => {
          this.data = res[0]
          res[1].list1.forEach((o) => {
            const tag = this.col2.get(o.rzmJtbh)
            this.data[tag][4] = o.itmCustwldm.slice(-7)
            this.data[tag][5] = o.moeXs
            this.data[tag][0] = o.moeScsl
            this.data[tag][6] = o.moeCxsj
          })
        })
        .catch((err) => {
          // alert(err + "网络原因：请检查网络连接或服务器状态");
          console.log(err + '网络原因：请检查网络连接或服务器状态')
        })
    },
    submit() {
      let url = pythonHost + '/find_mysql_P_jihua/'
      let params = this.form
      if (params) {
        let paramsArray = []
        //拼接参数
        Object.keys(params).forEach((key) => paramsArray.push(key + '=' + params[key]))
        if (url.search(/\?/) === -1) {
          url += '?' + paramsArray.join('&')
        } else {
          url += '&' + paramsArray.join('&')
        }
      }
      fetch(url, {
        method: 'GET',
        headers: { 'content-type': 'application/json' },
        //body: JSON.stringify(this.form),
      })
        .then((res) => {
          this.getInfo()
          return res.json()
        })
        .then((res) => {
          this.data = res
        })
        .catch((err) => {
          //alert(err + "网络原因：请检查网络连接或服务器状态");
          console.log(err + '网络原因：请检查网络连接或服务器状态')
        })
    },
    clear(P) {
      this.$Modal.confirm({
        title: '提示',
        content: '换线会立即清空生产数，请确认是否换线！',
        onOk: () => {
          let xh = this.form[P.replace('P', 'Xh')]
          let url = pythonHost + '/update_mysql_P_shiji/?P=' + P + '&Xh=' + xh
          fetch(url, {
            method: 'GET',
            headers: { 'content-type': 'application/json' },
            //body: JSON.stringify(this.form),
          })
            .then((res) => {
              this.getInfo()
              return res.json()
            })
            .then((res) => {
              // console.log(res)
              this.data = res
            })
          this.submit()
        },
      })
    },
  },
  mounted() {
    // this.in_storage = true;
    this.getInfo().then((res) => {
      ;['P1', 'P2', 'P3', 'P4', 'P5', 'P6'].forEach((i, index) => {
        this.form[i] = this.data[i][0]
        this.form['Xs' + (index + 1)] = this.data[i][5]
        this.form['Xh' + (index + 1)] = this.data[i][4]
        this.form['bzjp' + (index + 1)] = this.data[i][6]
      })
    })
    if (this.taskDate) clearInterval(this.taskDate)
    this.taskDate = setInterval(() => {
      this.date = this.$moment().format()
    }, 1000)
    if (this.task60) clearInterval(this.task60)
    this.task60 = setInterval(() => {
      this.getInfo()
    }, 10000)
  },
}
</script>

<style scoped lang="less">
@font-face {
  font-family: 'electronicFont';
  src: url('../../../assets/font/DS-DIGIT.TTF');
}
// @font-face {
//   font-family: 'electronicFont';
//   src: url('/hd-api/static/font/DS-DIGIT.TTF');
// }

.v-transfer-dom {
  /deep/ .ivu-modal-fullscreen .ivu-modal-content {
    background: #000d4a url('../../../assets/images/bg.jpg') center center;
    background-size: cover;
    color: #666;
    font-size: 1rem;
    .head {
      height: 7rem;
      background: url('../../../assets/images/head_bg.png') no-repeat center center;
      background-size: 100% 100%;
      position: relative;
    }
  }
}
.barbox {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: relative;
  text-align: right;
  padding-right: 1rem;
  &:before {
    border-left: 2px solid #02a6b5;
    left: 0;
    border-top: 2px solid #02a6b5;
  }
  &:after {
    border-right: 2px solid #02a6b5;
    right: 0;
    bottom: 0;
    border-bottom: 2px solid #02a6b5;
  }
  &:before,
  &:after {
    position: absolute;
    width: 3rem;
    height: 1rem;
    content: '';
  }
  span {
    font-size: 2.5rem;
    line-height: 5rem;
  }
  .count {
    color: #ffeb7b;
    font-size: 5rem;
    padding: 0.5rem 0;
    font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
    font-weight: bold;
    font-family: electronicFont;
  }
}
.time {
  position: absolute;
  right: 1rem;
  top: 1rem;
  line-height: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  font-size: 2.6rem;
  padding-right: 1rem;
  font-family: electronicFont;
}
.content {
  display: flex;
  justify-content: center;
  table {
    font-size: 2rem;
    color: white;
    td {
      padding: 1rem;
    }
  }
}
.rkpb {
  margin: 10px 0px 0px 20px;

  table {
    table-layout: fixed;
    border: 1px solid black;
    border-collapse: collapse;
    text-align: center;
    line-height: 32px;
    font-size: 18px;

    td,
    th {
      border: 1px solid black;
    }
  }
}
</style>
